import React, { Component } from "react";
import "./index.scss";
import { connect } from "react-redux";
import sumitSuccess from "@images/imageXHF/open-pay-loading.gif";
import { InterfaceG } from "@config/Config";
import yhTools from "@tools/yh";
import { Toast, Modal } from "antd-mobile";
import MainLayout from "@component/mainLayout/mainLayout";
export class xhfLivenessRet extends Component {
	constructor(props) {
		super(props);
		this.state = {
			timeText: `倒计时10秒`,
			time: 10,
			httpFlag: false,
			modal: false,
			modal2: false
		};
		this.timer = null;
	}

	componentDidMount() {
		this.countDown();
	}
	componentWillUnmount() {
		clearInterval(this.timer);
	}

	//倒计时
	countDown() {
		const _this = this;
		let { time } = this.state;
		this.timer = setInterval(() => {
			if (time < 1) {
				// clearInterval(_this.timer);
				// Toast.info("开通支付超时", 3);
				// setTimeout(() => {
				//     yhTools.noticePayFailed("支付失败");
				// }, 3000);
				clearInterval(_this.timer);
				this.setState({
					modal: true
				});
			} else {
				time--;
				_this.setState({
					time,
					timeText: `倒计时${time}秒`
				});
				if (!this.state.httpFlag) {
					_this.xhfAppSubApply();
				}
			}
		}, 1000);
	}

	//获取授信接口
	xhfAppSubApply() {
		let objs = {
			url: InterfaceG.pendingApproval,
			params: {
				lnid: this.props.getAppPlatformsDatas.lnid
			}
		};
		let _that = this;
		this.setState(
			{
				httpFlag: true
			},
			() => {
				yhTools.request(objs).then(res => {
					if (res.code === "0") {
						//1-开通并支付成功 2-开通中 3-开通失败 4-不支持小辉付 5-小辉付额度不足，6-支付失败
						const status = res.data.stepStatus;
						if (status == "1") {
							clearInterval(_that.timer);
							_that.props.history.push("/openPayResults/612");
						} else if (status == "3") {
							clearInterval(_that.timer);
							Toast.info("小辉付授信未通过，请更换支付方式", 3);
							setTimeout(() => {
								yhTools.noticePayFailed("小辉付授信未通过，请更换支付方式");
							}, 3000);
						} else if (status == "4") {
							clearInterval(_that.timer);
							Toast.info("该笔支付暂不支持小辉付，请更换支付方式", 3);
							setTimeout(() => {
								yhTools.noticePayFailed(
									"该笔支付暂不支持小辉付，请更换支付方式"
								);
							}, 3000);
						} else if (status == "5") {
							clearInterval(_that.timer);
							Toast.info("当期小辉付额度不足，请更换支付方式", 3);
							setTimeout(() => {
								yhTools.noticePayFailed("当期小辉付额度不足，请更换支付方式");
							}, 3000);
						} else if (status == "6") {
							clearInterval(_that.timer);
							Toast.info("支付失败", 3);
							setTimeout(() => {
								yhTools.noticePayFailed("支付失败");
							}, 3000);
						}
						this.setState({
							httpFlag: false
						});
					} else {
						this.setState({
							httpFlag: false
						});
						Toast.info(res.message, 2);
					}
				});
			}
		);
	}
	backFn = () => {
		yhTools.noticePayCanceled("支付取消");
	};
	handleBack = () => {
		this.setState({
			modal2: true
		});
	};
	render() {
		const { timeText, modal, modal2 } = this.state;
		let _pageParams = {
			header: {
				title: "开通中",
				goBackAction: this.handleBack
			},
			isModal: true,
			history: this.props.history,
			cacheLifecycles: this.props.cacheLifecycles
		};
		return (
			<MainLayout pageParams={_pageParams} handleBack={this.handleBack}>
				<Modal
					visible={modal}
					transparent
					title="提示"
					footer={[
						{
							text: "我知道了",
							onPress: () => {
								this.setState({
									modal: false
								});
							}
						}
					]}
					afterClose={() => {
						this.setState(
							{
								timeText: `倒计时10秒`,
								time: 10
							},
							() => {
								this.countDown();
							}
						);
					}}
				>
					<div>继续为您处理中，请耐心等待……</div>
				</Modal>
				<Modal
					visible={modal2}
					transparent
					title="提示"
					footer={[
						{
							text: "我知道了",
							onPress: () => {
								this.setState({
									modal2: false
								});
							}
						}
					]}
				>
					<div>正在等待开通及支付结果返回，请勿返回或重复发起。</div>
				</Modal>
				<div className="xhf-liveness-ret">
					<div className="liveness-ret-box">
						<img src={sumitSuccess} />
						<h3>开通并支付中</h3>
						<span>我们正在加急为您处理，请您耐心等待</span>
					</div>
					<p className="time">{timeText}</p>
					<div className="infor-content">
						<span>结果返回前，请勿退出</span>
					</div>
				</div>
			</MainLayout>
		);
	}
}

function mapStateToProps(state) {
	return state;
}

function mapDispatchToProps() {
	return {};
}

const xhfLivenessRetPage = connect(
	mapStateToProps,
	mapDispatchToProps
)(xhfLivenessRet);
export default xhfLivenessRetPage;
